<template>
  <div>
    <el-select v-model="selectedFloor" placeholder="请选择楼层">
      <el-option label="一楼" value="1" />
      <el-option label="二楼" value="2" />
    </el-select>
    <el-row>
      <el-col v-for="room in getRoomsByFloor(selectedFloor)" :key="room.roomNumber" :span="8">
        <el-card :body-style="{ padding: '10px' }" style="margin-bottom: 20px;">
          <p>房间号: {{ room.roomNumber }}</p>
          <p>床铺:</p>
          <el-tag v-for="bed in room.beds" :key="bed.bedNumber" :type="bed.status === '空闲' ? 'success' : 'danger'">{{ bed.bedNumber }}</el-tag>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rooms: [
        {
          roomNumber: '101',
          floor: 1,
          beds: [
            { bedNumber: '床铺1', status: '已入住' },
            { bedNumber: '床铺2', status: '空闲' }
          ]
        },
        {
          roomNumber: '102',
          floor: 1,
          beds: [
            { bedNumber: '床铺1', status: '已预订' },
            { bedNumber: '床铺2', status: '已入住' }
          ]
        },
        {
          roomNumber: '103',
          floor: 1,
          beds: [
            { bedNumber: '床铺1', status: '空闲' },
            { bedNumber: '床铺2', status: '已预订' }
          ]
        },
        {
          roomNumber: '104',
          floor: 1,
          beds: [
            { bedNumber: '床铺1', status: '已入住' },
            { bedNumber: '床铺2', status: '空闲' }
          ]
        },
        {
          roomNumber: '105',
          floor: 1,
          beds: [
            { bedNumber: '床铺1', status: '空闲' },
            { bedNumber: '床铺2', status: '空闲' }
          ]
        },
        {
          roomNumber: '106',
          floor: 1,
          beds: [
            { bedNumber: '床铺1', status: '空闲' },
            { bedNumber: '床铺2', status: '空闲' }
          ]
        },
        {
          roomNumber: '201',
          floor: 2,
          beds: [
            { bedNumber: '床铺1', status: '空闲' },
            { bedNumber: '床铺2', status: '已预订' }
          ]
        },
        {
          roomNumber: '202',
          floor: 2,
          beds: [
            { bedNumber: '床铺1', status: '已入住' },
            { bedNumber: '床铺2', status: '已预订' }
          ]
        },
        {
          roomNumber: '203',
          floor: 2,
          beds: [
            { bedNumber: '床铺1', status: '已入住' },
            { bedNumber: '床铺2', status: '空闲' }
          ]
        },
        {
          roomNumber: '204',
          floor: 2,
          beds: [
            { bedNumber: '床铺1', status: '已预订' },
            { bedNumber: '床铺2', status: '已预订' }
          ]
        },
        {
          roomNumber: '205',
          floor: 2,
          beds: [
            { bedNumber: '床铺1', status: '空闲' },
            { bedNumber: '床铺2', status: '空闲' }
          ]
        },
        {
          roomNumber: '206',
          floor: 2,
          beds: [
            { bedNumber: '床铺1', status: '空闲' },
            { bedNumber: '床铺2', status: '空闲' }
          ]
        }
      ],
      selectedFloor: '1'
    }
  },
  methods: {
    getRoomsByFloor(floor) {
      return this.rooms.filter(room => room.floor == floor)
    }
  }
}
</script>
